<!DOCTYPE html>
<html>
<head>
    <title>ReportBro Demo</title>
    <meta charset="utf-8"/>
    <link href="base.css" rel="stylesheet" type="text/css"/>
    <link href="../dist/reportbro.css" rel="stylesheet" type="text/css"/>
    <script src="../dist/reportbro.js"></script>
</head>
<body>
    <div id="reportbro"></div>

    <script type="text/javascript">

///////////////////////////////////////////////////////////////////////////////
// this demo shows how you can use the saveCallback for a custom save
// function to upload the report to your server. You need to replace
// '<your save controller url>' with your url where you save the report
// in your web application. How you handle saving the report server-side is
// up to you.
///////////////////////////////////////////////////////////////////////////////

let rb;

function saveReport() {
    const report = rb.getReport();

    fetch('<your save controller url>', {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(report),
    }).then((response) => {
        if (!response.ok) {
          throw Error(response.statusText);
        }
        return response;
    }).then((response) => response.json())
        .then((data) => {
            rb.setModified(false);
            alert('report saved');
        }).catch((error) => {
            alert('saving report failed');
        });
}

rb = new ReportBro(document.getElementById('reportbro'), {
    //remove reportServerUrl if you want to use the default report server for a quick start
    reportServerUrl: 'http://localhost:8000/reportbro/report/run',
    saveCallback: saveReport
});

// load report saved in your application database
const report = null; // TODO: get report from server
if (report !== null) {
    rb.load(report);
}

    </script>
</body>
</html>
